<!DOCTYPE html>
<html>
<head>
	<title>条件渲染</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		<div v-if="show ==='a'">this is A</div>
		<div v-else-if="show === 'b'">this is B</div>
		<div v-else>this is others</div>
		<div v-show="show">hello world</div>
		<template v-if="ok">
			<h1>Title</h1>
			<p>p1</p>
			<p>p2</p>
		</template>
		<div>
			<div v-if="ok">
				phone : <input type="text" placeholder="input your phone" key="phone"/>
			</div>
			<div v-else>
				email : <input type="text" placeholder="input your email" key="email">
			</div>
			<button @click="handerToggle">toggle</button>
		</div>
	</div>
	<script>
		var app = new Vue({
			el : '#app' ,
			data : {
				show: 'b',
				ok : true
			},
			methods : {
				handerToggle : function() {
					this.ok = !this.ok;
				}
			}
		});
	</script>
</body>
</html>